import 'package:flutter/material.dart';

class GroupWidget extends StatefulWidget {
  const GroupWidget({super.key});

  @override
  State<GroupWidget> createState() => _GroupWidgetState();
}

class _GroupWidgetState extends State<GroupWidget> {
  // 分别记录两行的选中状态
  String? _selectedRow1; // 第一行选中的按钮（A/B/C）
  String? _selectedRow2; // 第二行选中的按钮（早/中/晚）

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(20),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 第一行：A, B, C
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: ['A', 'B', 'C'].map((text) {
              return _buildSelectableButton(
                text: text,
                isSelected: _selectedRow1 == text,
                onTap: () => setState(() => _selectedRow1 = text),
              );
            }).toList(),
          ),
          SizedBox(height: 30),
          // 第二行：早, 中, 晚
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: ['早', '中', '晚'].map((text) {
              return _buildSelectableButton(
                text: text,
                isSelected: _selectedRow2 == text,
                onTap: () => setState(() => _selectedRow2 = text),
              );
            }).toList(),
          ),
        ],
      ),
    );
  }
  // 可选中按钮组件
  Widget _buildSelectableButton({required String text,required bool isSelected,required VoidCallback onTap,}) {
    return GestureDetector(
      onTap: onTap,
      child: AnimatedContainer(
        duration: Duration(milliseconds: 200),
        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
        decoration: BoxDecoration(
          color: isSelected ? Colors.blue.shade600 : Colors.white,
          borderRadius: BorderRadius.circular(8),
          border: Border.all(
            color: isSelected ? Colors.blue.shade800 : Colors.grey.shade300,
            width: isSelected ? 2 : 1,
          ),
          boxShadow: [
            if (isSelected)
              BoxShadow(
                  color: Colors.blue.shade200,
                  blurRadius: 4,
                  offset: Offset(0, 2))
          ],
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            if (isSelected)
              Icon(Icons.check, size: 18, color: Colors.white),
            SizedBox(width: isSelected ? 8 : 0),
            Text(
              text,
              style: TextStyle(
                fontSize: 16,
                color: isSelected ? Colors.white : Colors.grey.shade800,
                fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
              ),
            ),
          ],
        ),
      ),
    );
  }
}
